<template>
  <view class="main">
    <!-- 身份证头像照 -->
    <view class="continer">
      <view class="continer_title">放置截图（至少一张图片）</view>
      <view @click="upload()">
        <view v-if="uploadImgUrl == null || uploadImgUrl == ''" class="add"></view>
        <img v-else class="img" :src="uploadImgUrl" mode="widthFix">
      </view>
    </view>

    <!-- 提交按钮 -->
    <button type="primary" @click="onFinishDemand">提交完成</button>
    <view class="bt" style="height: 40rpx"></view>
  </view>
</template>

<script>
  // 按需导入 mapState 辅助函数
  import {
    mapState,
  } from 'vuex'


  export default {
    name: "finish-demand",
    computed: {
      // 将 m_user 模块中的 userinfo 映射到当前页面中使用
      ...mapState('m_user', ['token']),
    },
    data() {
      return {
        orderId: '',
        finishImg: {},
        uploadImgUrl: '',
      };
    },
    onLoad(options) {
      this.orderId = options.orderId;
      console.log(this.orderId)
    },
    methods: {
      async onFinishDemand(){
        if (this.uploadImgUrl.length < 1 || this.uploadImgUrl == null) {
          return;
        }
        var temp = {
          finishUrl: this.uploadImgUrl,
          addressKey: this.orderId,
        }
        console.log(temp)
        const {
          data: result
        } = await uni.$http.post("/api/READ/api/my/demand/run/ok", temp)
        if (result.code != '200') return uni.$showMsg(result.msg);
        console.log(result);
        // this.uploadImgUrl = result.data;
        
        uni.switchTab({
          url: '/pages/runner/runner'
        })
      },
      async getFinishImage() {
        const {
          data: result
        } = await uni.$http.post("/api/READ/api/my/runner-detail/list/" + this.uid)
        if (result.code != '200') return uni.$showMsg(result.msg);
        console.log(result);
        this.uploadImgUrl = result.data;
      },
      async upload() {
        uni.chooseImage({
          success: (chooseImageRes) => {
            const tempFilePaths = chooseImageRes.tempFilePaths;
            // console.log(tempFilePaths)
            uni.uploadFile({
              url: 'http://localhost/api/READ/api/my/orders/finish/demand', //仅为示例，非真实的接口地址
              filePath: tempFilePaths[0],
              name: 'file',
              header: {
                token: this.token,
                orderId: this.orderId,
              },
              formData: {
                'user': 'test'
              },
              success: (uploadFileRes) => {
                var result = JSON.parse(uploadFileRes.data)
                console.log(result);
                if (result.code != '200') return uni.$showMsg("上传失败");
                
                this.uploadImgUrl = result.data;
                return uni.$showMsg("上传成功");
              },
              fail: (res) => {
                uni.$showMsg(res)
                console.log("s1")
                return uni.$showMsg("上传失败");
              }
            });
          }
        });
      }
    }
  }
</script>


<style lang="scss">
  .main {
    margin: 5%;
  }

  .title {
    font-size: 35rpx;
    font-weight: bold;
  }

  .continer {
    width: 100%;
    // border: 1px solid red;
  }

  .img {

    display: block;
    max-width: 99%;
    max-height: 450rpx;
    border: 1px solid green;
  }

  .continer_title {
    color: #00AA00;
    text-align: center;
    margin: 4% 0 4% 0;
  }

  .text-clamp2 {
    color: red;
    font-size: 35rpx;
    margin: 5% 0 0 0;
    width: 90%;
    display: inline-block;
    white-space: pre-wrap;
    word-wrap: break-word;
    height: auto;
  }

  .bt {
    margin-bottom: 20px;
  }

  .add {
    display: inline-block;
    width: 98%;
    height: 100px;
    color: #ccc;
    border: 2px dashed;
    text-indent: -12em;
    transition: color .25s;
    position: relative;
    overflow: hidden;
  }

  .add:hover {
    color: #34538b;
  }

  .add::before,
  .add::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
  }

  .add::before {
    width: 20px;
    border-top: 4px solid;
    margin: -2px 0 0 -10px;
  }

  .add::after {
    height: 20px;
    border-left: 4px solid;
    margin: -10px 0 0 -2px;
  }
</style>